<template>
    <div class="box-cmd">
        <el-drawer
            :modal="false" :modal-append-to-body="false" :wrapperClosable="false"
            :title="$t('cmd.redis_cli')+' ['+cmdChoseItem.Host+':'+cmdChoseItem.Port+' #'+cmdChoseItem.choseDb+']'"
            :visible.sync="cmdDrawer" :direction="direction" :before-close="handleClose" size="100%">
            <div class="box-info" ref="box-info">
                <div class="cmd-item" v-for="(requestItem,index) in cmdArray" :key="index">
                    <p class="cmd-item-request" @click="focusLine(index)">
                        <span class="cmd-item-server">{{requestItem.server}} &gt;&gt;&gt;：</span><span class="cmd-item-param" ref="requestItem-param" :contenteditable="requestItem.contenteditable" v-html="requestItem.param" @keyup.enter="sendCommend($event,requestItem)"></span>
                    </p>
                    <pre class="cmd-item-result">{{requestItem.result}}</pre>
                </div>
            </div>
            <div class="box-operating">
                <el-button type="primary" size="small" @click="cleanBox">{{$t('cmd.clear')}}</el-button>
                <el-button type="primary" size="small" @click="handleClose()">{{$t('cmd.close')}}</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import redis from '../../redis/redisClient'
import shell from '../../redis/shell'
export default {
    props:["cmdDrawer","cmdChoseItem"],
    data(){
        return {
            client:{},
            direction:"ltr",
            cmdStr:"123",
            cmdArray:[]
        }
    },
    created(){
        if(this.cmdChoseItem===undefined||JSON.stringify(this.cmdChoseItem)=='{}'){
            this.$message({
                type:"warning",
                message:this.$t('cmd.PleaseSelectConnection')
            })
            this.$emit("hide")
        }else{
            this.client = redis.createConnection(this.cmdChoseItem.Port, this.cmdChoseItem.Host, this.cmdChoseItem.Auth)
            this.createRequest()
        }
    },
    methods:{
        focusLine(index){
            this.$refs["requestItem-param"][index].focus()
        },
        createRequest(){
            var requestItem={server:this.cmdChoseItem.Host+":"+this.cmdChoseItem.Port+":"+this.cmdChoseItem.choseDb,param:"",result:"",contenteditable:true}
            this.cmdArray.push(requestItem)
            this.$nextTick(function () {
                this.$refs["requestItem-param"][this.cmdArray.length-1].focus()
            }) 
        },
        handleClose(){
            this.$emit("hide")
        },
        cleanBox(){
            this.cmdArray=[];
            this.createRequest()
        },
        sendCommend(event,requestItem){
            let cmd=event.target.outerText.replace(/^\s+|\s+$/g, '')
            shell.exec(this.client,cmd).then((res)=>{
                if(cmd.indexOf('select')>=0&&res==="OK"){
                    this.cmdChoseItem.choseDb="DB"+cmd.replace("select","").replace(/^\s+|\s+$/g, '')
                }
                requestItem.param=cmd;
                requestItem.result=this.resolveResult(res);
                requestItem.contenteditable=false;
                this.createRequest()
            }).catch((e)=>{
                requestItem.param=cmd;
                requestItem.result=e.message;
                requestItem.contenteditable=false;
                this.createRequest()
            })
            return;
        },
        resolveResult(result) {
            let append = '';
            if (result === null) {
                append = `${null}\n`;
            }
            else if (typeof result === 'object') {
                const isArray = !isNaN(result.length);
                for (const i in result) {
                    if (typeof result[i] === 'object') {
                        append += this.resolveResult(result[i]);
                    }
                    else {
                        append += `${(isArray ? '' : (`${i}\n`)) + result[i]}\n`;
                    }
                }
            }
            else {
                append = `${result}\n`;
            }
            return append;
        }
    }
}
</script>

<style scoped>
.box-cmd >>> .el-drawer__header span:focus,.box-cmd >>>.el-drawer:focus{
    outline: none;
}
.cmd-item{
    font-size: 12px;
    font-family: "微软雅黑";
    margin-bottom: 10px;
}
.cmd-item p{
    margin: 0px 0px 0px 5px;
}
.cmd-item-request >>> .el-input{
    display: inline-block;
}
.cmd-item-request >>> .el-input__inner{
    border: none;
}
.box-cmd >>> .el-drawer__body{
    height: 100%;
}
.cmd-item-request *:focus{
    outline: none;
}
.box-info{
    height: 92%;
    overflow-y: scroll;
    background-color: black;
    color: white;
    padding: 5px;
}
.cmd-item-result{
    margin: 5px 0px 0px 15px;
}
.box-operating{
    margin: 5px 5px 0px 0px;
    text-align: end;
}
</style>